import React from 'react';
import { Button } from 'antd';
import { inject, observer } from 'mobx-react';
import { WeaTop, WeaNewScroll, WeaDialog, WeaLocaleProvider, WeaTab, WeaDropdown, WeaRightMenu } from 'ecCom';
import { WeaTableNew, WeaLogView } from 'comsMobx';
import { affirmDeleted } from '../util/affirmDeleted';

const { ButtonSelect } = WeaDropdown;
const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;
const WeaLogViewComp = WeaLogView.Component;


@inject('fieldSetStore')
@observer
export default class FieldSet extends React.Component {
  componentDidMount() {
    const { fieldSetStore } = this.props;
    fieldSetStore.getCondition();
    fieldSetStore.getTableData();
    fieldSetStore.getFormContent();
  }

  componentWillUnmount() {
    const { fieldSetStore } = this.props;
    fieldSetStore.setCanotClick();
  }

  onChange(data) {
    const { fieldSetStore } = this.props;
    const key = Object.keys(data)[0];
    fieldSetStore.searchField[key] = data[key];
  }

  //
  onDialogChange(data) {
    const { fieldSetStore } = this.props;
    const key = Object.keys(data)[0];
    fieldSetStore.addfield[key] = data[key];
  }

  // 重新渲染table
  getColumns = (columns) => {
    const { fieldSetStore } = this.props;
    return columns.map((col) => {
      if (col.dataIndex == 'showname') {
        return {
          ...col,
          title: col.title,
          className: 'showname',
          render: (text, record, index) => {
            if (record.field_type != '0' && record.field_type != '') {
              return (
                <span>{record.shownamespan}</span>
              );
            }
            if (record.iscancel === '1') {
              return (
                <a onClick={() => fieldSetStore.operate(record, '', index, '0')} style={{ color: '#4d7ad8' }} >{record.shownamespan}<span style={{ color: 'red' }}>（{getLabel(22205, '已封存')}）</span></a>
              );
            } else if (record.iscancel === '0') {
              return (
                <a onClick={() => fieldSetStore.operate(record, '', index, '0')} style={{ color: '#4d7ad8' }} >{record.shownamespan}</a>
              );
            }
          },
        };
      }

      return col;
    });
  }

  // 获取搜索表单
  getSearchForm() {
    const { fieldSetStore } = this.props;
    const { searchForm } = this.props.fieldSetStore;
    return (
      <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@7i0s1i`} ref="scroll" >
        {searchForm.render(
          { needTigger: false },
          {
            // onChange: this.onChange,
            onEnterSearch: () => fieldSetStore.search(),
          },
        )}
      </WeaNewScroll>
    );
  }

  // 获取编辑字段和新建字段的form表单按钮
  getFieldButtons() {
    const { fieldSetStore } = this.props;
    let buttons = [];
    if (fieldSetStore.showButton === 1) {
      buttons = [
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v94jux@save`} type="primary" onClick={() => fieldSetStore.onCheck()}>{getLabel(30986, '保存')}</Button>),
      ];
    } else {
      buttons = [
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8l85bb@ok`} type="primary" onClick={() => fieldSetStore.onCheck()}>{getLabel(386788, '确定')}</Button>),
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7szt5k@cancel`} type="ghost" onClick={() => fieldSetStore.onCancel()} >{getLabel(386789, '取消')}</Button>),
      ];
    }
    return buttons;
  }

  // 获取高级搜索的form表单的操作按钮
  getSearchFormButtons() {
    const { fieldSetStore } = this.props;
    const searchbutton = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gry2ik@search`} type="primary" onClick={() => fieldSetStore.search()}>{getLabel(388113, '搜索')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lhxipt@reset`} type="ghost" onClick={() => { fieldSetStore.searchForm.resetForm(); }}>{getLabel(2022, '重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h2fhlh@cancel`} type="ghost" onClick={() => { fieldSetStore.setShowSearchAd(); }}>{getLabel(31129, '取消')}</Button>,
    ];
    return searchbutton;
  }

  // 批量处理按钮
  handleBatchBtn(v) {
    const { fieldSetStore } = this.props;
    switch (v) {
      // 封存
      case '2': {
        affirmDeleted(fieldSetStore.onSeal, { content: `${getLabel('521642', '确认要封存选中数据吗')}?` });
        break;
      }
      // 解封
      case '3': {
        affirmDeleted(fieldSetStore.onUnseal, { content: `${getLabel('521643', '确认要解封选中数据吗')}?` });
        break;
      }
      // 删除
      case '1': {
        affirmDeleted(() => fieldSetStore.delete());
        break;
      }
    }
  }

  // 获取tab页签的按钮
  getTabButtons() {
    const { fieldSetStore } = this.props;
    const datas = [
      { key: '2', show: <span>{getLabel(33619, '批量封存')}</span> },
      { key: '3', show: <span>{getLabel(33620, '批量解封')}</span> },
      { key: '1', show: <span>{getLabel(32136, '批量删除')}</span> },
    ];
    const btns = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@68781z@create`} type="primary" onClick={fieldSetStore.newCreat}>{getLabel(365, '新建')}</Button>,
      <ButtonSelect ecId={`${this && this.props && this.props.ecId || ''}_ButtonSelect@c3tx70@select`}
        datas={datas}
        btnProps={{ disabled: fieldSetStore.CanotClick }}
        btnOnClick={(key) => { this.handleBatchBtn(key); }}
        menuOnClick={(key) => {
          fieldSetStore.key = key;
          fieldSetStore.checkMenuClick();
        }}
        selectedKey={fieldSetStore.key}
      />,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@miafbk@log`} type="primary" onClick={() => { fieldSetStore.logShow = true; }} >{getLabel(83, '日志')}</Button>,
    ];
    return btns;
  }

  getRightMenu() {
    const { fieldSetStore } = this.props;
    const { newCreat, CanotClick, setKey, showLog, key, getTableData } = fieldSetStore;
    const rightMenuDatas = [{
      key: '6',
      disabled: false,
      icon: <i className="icon-coms-search" />,
      content: getLabel('388113', '搜索'),
      onClick: () => getTableData(),
    }, {
      key: '4',
      disabled: false,
      icon: <i className="icon-coms-Add-to" />,
      content: getLabel('384112', '新建'),
      onClick: () => newCreat(),
    }];
    if (key == '2') {
      rightMenuDatas.push({
        key: '2',
        disabled: CanotClick,
        icon: <i className="icon-coms-locking" />,
        content: getLabel('33619', '批量封存'),
        onClick: (index) => { setKey(index); this.handleBatchBtn(index); },
      });
    }
    if (key == '3') {
      rightMenuDatas.push({
        key: '3',
        disabled: CanotClick,
        icon: <i className="icon-coms-unlock" />,
        content: getLabel('33620', '批量解封'),
        onClick: (index) => { setKey(index); this.handleBatchBtn(index); },
      });
    }
    if (key == '1') {
      rightMenuDatas.push({
        key: '1',
        disabled: CanotClick,
        icon: <i className="icon-coms-form-delete" />,
        content: getLabel('32136', '批量删除'),
        onClick: (index) => { setKey(index); affirmDeleted(() => this.handleBatchBtn(index)); },
      });
    }
    rightMenuDatas.push({
      key: '5',
      disabled: false,
      icon: <i className="icon-coms-Print-log" />,
      content: getLabel('83', '日志'),
      onClick: () => showLog(),
    });
    return rightMenuDatas;
  }

  render() {
    const { fieldSetStore } = this.props;
    const tableStore = fieldSetStore.mainTable.tableStore;
    const showname = fieldSetStore.searchForm.getFormParams().showname;
    return (
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@y25qxd`} datas={this.getRightMenu()} >
        <div className="content">
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@nlgm0r`}
            title={getLabel(21903, '字段设置')}
            icon={<i className="icon-coms-content-o" />}
            iconBgcolor="#0079DE"
            buttons={this.getTabButtons()}
          />
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@mnou3v`}
            searchType={['base', 'advanced']}
            showSearchAd={fieldSetStore.showSearchAd}
            setShowSearchAd={() => fieldSetStore.setShowSearchAd()}
            buttonsAd={this.getSearchFormButtons()}
            searchsAd={this.getSearchForm()}
            advanceHeight={80}
            onSearch={text => fieldSetStore.getTableData(text)}
            searchsBaseValue={showname}
            onSearchChange={(v) => {
              fieldSetStore.searchForm.updateFields({ showname: { value: v } }, false);
            }}
          />
          {/* 表格 */}
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@hvagew`}
            className="filedSetDataList"
            comsWeaTableStore={tableStore}
            getColumns={this.getColumns}
            hasOrder={true}
            needScroll={true}
            rowSelection={{
              // selectedRowKeys:fieldSetStore.selectedRowKeys,
              onChange: fieldSetStore.onRowSelect,
            }}
            onOperatesClick={fieldSetStore.operate}
          />
          <WeaLogViewComp ecId={`${this && this.props && this.props.ecId || ''}_WeaLogViewComp@nmqq76`}
            visible={fieldSetStore.logShow}
            onCancel={() => {
              fieldSetStore.logShow = false;
              fieldSetStore.targetId = '';
            }}
            logStore={fieldSetStore.logStore}
            logType="17"
            logSmallType="22"
            targetId={fieldSetStore.targetId}
          />
          {/* 弹出框 */}
          <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@9uux8b`}
            title={(fieldSetStore.showDialogTitle === '0' && getLabel(387613, '新建字段')) || (fieldSetStore.showDialogTitle === '1' && getLabel(15449, '编辑字段'))}
            className="fieldSetDialog"
            visible={fieldSetStore.alertState}
            buttons={this.getFieldButtons()}
            onCancel={fieldSetStore.onCancel}
            draggable={true}
            icon={'icon-coms-official'}
          >
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@o7w9aa`} ref="scroll">
              {fieldSetStore.form.render(
                { onChange: this.onDialogChange },
              )}
            </WeaNewScroll>
          </WeaDialog>
        </div>
      </WeaRightMenu>

    );
  }
}
